import {
    Message
} from 'element-ui';

const directives = {
    'card': {
        inserted(el, binding, vnode, oldVnode) {
            el.classList.add('page-card');
            el.style.height = window.innerHeight - 115 + 'px';

            function heightHandler(e) {
                el.style.height = window.innerHeight - 115 + 'px';
            }
            // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
            el.__page_card__ = heightHandler;
            window.addEventListener('resize', heightHandler);
        },
        unbind(el, binding) {
            // 解除事件监听
            window.removeEventListener('resize', el.__page_card__);
            delete el.__page_card__;
        }
    },
    'clickoutside': {
        // 初始化指令
        bind(el, binding, vnode) {
            function documentHandler(e) {
                // 这里判断点击的元素是否是本身，是本身，则返回
                if (el.contains(e.target)) {
                    return false;
                }
                // 判断指令中是否绑定了函数
                if (binding.expression) {
                    // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                    binding.value(e);
                }
            }
            // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
            el.__vueClickOutside__ = documentHandler;
            document.addEventListener('click', documentHandler);
        },
        update() {},
        unbind(el, binding) {
            // 解除事件监听
            document.removeEventListener('click', el.__vueClickOutside__);
            delete el.__vueClickOutside__;
        },
    },
    'delayClick': {
        inserted(el, binding) {
            let func = binding.value['func'];
            let time = binding.value['time'] || 1000;
            let args = [];
            for (const key in binding.value) {
                if (binding.value.hasOwnProperty(key)) {
                    if (key === 'func' || key === 'time') continue;
                    args.push(binding.value[key])
                }
            }
            el.addEventListener('click', (e) => {
                if (!el.disabled) {
                    el.disabled = true;
                    func(...args);
                    setTimeout(() => {
                        el.disabled = false;
                    }, time)
                } else {
                    Message({
                        message: '操作太频繁，请稍后再试！',
                        type: 'warning'
                    });
                }
            })
        }
    },
    'dialog-drag': {
        bind(el, binding, vnode, oldVnode) {
            // 自定义属性，判断是否可拖拽　
            const dialogHeaderEl = el.querySelector('.el-dialog__header')
            const dragDom = el.querySelector('.el-dialog')
            dialogHeaderEl.style.cssText += ';cursor:move;'
            dragDom.style.cssText += ';top:0px;'

            // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
            const sty = (function () {
                if (document.body.currentStyle) {
                    // 在ie下兼容写法
                    return (dom, attr) => dom.currentStyle[attr]
                } else {
                    return (dom, attr) => getComputedStyle(dom, false)[attr]
                }
            })()

            dialogHeaderEl.onmousedown = (e) => {
                // 鼠标按下，计算当前元素距离可视区的距离
                const disX = e.clientX - dialogHeaderEl.offsetLeft
                const disY = e.clientY - dialogHeaderEl.offsetTop

                const screenWidth = document.body.clientWidth // body当前宽度
                const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取)

                const dragDomWidth = dragDom.offsetWidth // 对话框宽度
                const dragDomheight = dragDom.offsetHeight // 对话框高度

                const minDragDomLeft = dragDom.offsetLeft
                const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth

                const minDragDomTop = dragDom.offsetTop
                const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight

                // 获取到的值带px 正则匹配替换
                let styL = sty(dragDom, 'left')
                // 为兼容ie　
                if (styL === 'auto') styL = '0px'
                let styT = sty(dragDom, 'top')

                // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
                if (styL.includes('%')) {
                    styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100)
                    styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100)
                } else {
                    styL = +styL.replace(/px/g, '')
                    styT = +styT.replace(/px/g, '')
                };

                document.onmousemove = function (e) {

                    // 通过事件委托，计算移动的距离
                    let left = e.clientX - disX
                    let top = e.clientY - disY
                    // 边界处理
                    if (-(left) > minDragDomLeft) {
                        left = -(minDragDomLeft)
                    } else if (left > maxDragDomLeft) {
                        left = maxDragDomLeft
                    }

                    if (-(top) > minDragDomTop) {
                        top = -(minDragDomTop)
                    } else if (top > maxDragDomTop) {
                        top = maxDragDomTop
                    }

                    // 移动当前元素
                    dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
                }

                document.onmouseup = function (e) {
                    document.onmousemove = null
                    document.onmouseup = null
                }
                return false
            }
        }
    }
}

export default {
    install: function (Vue) {
        Object.keys(directives).forEach(key => {
            Vue.directive(key, directives[key]);
        })
    }
}
